<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/bootstrap/css/bootstrap.min.css'"/>
    <link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/css/normalize.css'"/>
    <link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/css/rightCon.css'"/>
    <link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/css/thesame.css'"/>
    <link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/css/popUp.css'"/>
    
    <style type="text/css">
         /*取消选中效果*/
		div{
	    -moz-user-select:none;/*火狐*/
	    -webkit-user-select:none;/*webkit浏览器*/
	    -ms-user-select:none;/*IE10*/
	    -khtml-user-select:none;/*早期浏览器*/
	      user-select:none;
		}
    </style>
</head>
<body>
<div class="right-Sidebar-con">
	<article class="mb20px">
		<ul class="bread-crumb gray">
			<li class="inline-block">账号管理</li>
			<li class="inline-block darkGray">权限配置</li>
		</ul>
		<div class="pad20px mt20px overflow box-shadows bgWhite border-radius5 mb20px">
			<h1 class="fb pb20px border-bot">基本信息</h1>
			<div class="per-form bgWhite">
				<form action="" method="post" class="overflow">
					<dl class="left textCenter">
						<dt><img id="showImg" th:if="not ${#strings.isEmpty(map.USER_PHOTO)}" style="width:100px;height: 100px;" th:src="${map.USER_PHOTO}" class="filejs"><img id="showImg" th:if="${#strings.isEmpty(map.USER_PHOTO)}" style="width:100px;height: 100px;" th:src="@{/static/img/tx.png}"  class="filejs"></dt>
						<input type="file" class="hidden file"/>
						<dd class="cursor mt10px"><img th:src="@{/static/img/bj_gray.png}" class="mr10px">点击修改头像</dd>
					</dl>
					<ul class="right">
						<li class="form-inline">
							<p class="form-group"><label>用户姓名：</label></p>
							<p class="form-group" style="position: relative;top: -2px;" th:text="${map.USER_NAME}"></p>
						</li>
						<li class="form-inline">
							<p class="form-group"><label>登录账号：</label></p>
							<p class="form-group form-width overflow"><em style="position: relative;top: 4px;" th:text="${map.LOGIN_NAME}"></em><span id="editPasswordBtn" class="right white bgBlue"><img th:src="@{/static/img/bj_white.png}">修改密码</span></p>
						</li>
						<li class="form-inline">
							<p class="form-group"><label>所属组织：</label></p>
							<p class="form-group" style="position: relative;top: -2px;" th:text="${map.ORG_NAME}"></p>
						</li>
						<li class="form-inline">
							<p class="form-group"><label>部门/职位：</label></p>
							<p class="form-group" style="position: relative;top: -2px;" th:text="${map.POST}"></p>
						</li>
						<li class="form-inline">
							<p class="form-group"><label>手机号：</label></p>
							<p class="form-group form-width overflow"><em style="position: relative;top: 4px;" th:text="${map.PHONE}"></em><span id="editPhoneBtn" class="right white bgBlue"><img th:src="@{/static/img/bj_white.png}">修改手机号</span></p>
						</li>
					</ul>
				</form>
			</div>
		</div>
	</article>
</div>

<!--更换号码弹层-->
<div id="pop-edit-phone-confirm" style="display:none;">
	<div class="popUp">
		<h1 class="relative pl15px f16px overflow title-top"><span class="left">更换手机</span><span class="right close-btn"><img th:src="@{/static/img/tc_close.png}"></span></h1>
		<div class="per-form per-form-pop bgWhite">
			<form action="" method="post" class="overflow">
				<ul class="right">
					<li class="form-inline">
						<p class="form-group"><label>手机号：</label></p>
						<p class="form-group"><input maxlength="11" type="text" onkeyup="value=value.replace(/[^\d]/g,'')" id="phone" class="form-control" placeholder="请输入11位的手机号" /></p>
					</li>
					<li class="form-inline">
						<p class="form-group"><label>验证码：</label></p>
						<p class="form-group form-width overflow"><input maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')" type="text" id="verifyCode" class="form-control" placeholder="请输入验证码" /><span id="sendVerifyCodeBtn" onclick="sendVerifyCode(this)" class="right confirm-cons cursor">获取验证码</span></p>
					</li>
				</ul>
			</form>
		</div>
		<div class="btn-con textCenter pb20px pt20px cursor">
			<div class="inline-block textCenter overflow">
				<p class="confirm-cancel mr40px">取    消</p>
				<p class="confirm-con">确    定</p>
			</div>
		</div>
	</div>
</div>

<!--更换密码弹层-->
<div id="pop-edit-password-confirm" style="display:none;">
	<div class="popUp">
		<h1 class="relative pl15px f16px overflow title-top"><span class="left">更换密码</span><span class="right close-btn"><img th:src="@{/static/img/tc_close.png}"></span></h1>
		<div class="per-form per-form-pop bgWhite">
			<form action="" method="post" class="overflow">
				<ul class="right">
					<li class="form-inline">
						<p class="form-group"><label>新密码：</label></p>
						<p class="form-group"><input maxlength="20" type="password" id="newPsw" class="form-control" placeholder="请输入8-20位包含数字英文特殊字符"/></p>
					</li>
					<li class="form-inline">
						<p class="form-group"><label>重复密码：</label></p>
						<p class="form-group"><input maxlength="20" type="password" id="repeatPsw" class="form-control" placeholder="请再次输入密码"/></p>
					</li>
				</ul>
			</form>
		</div>
		<div class="btn-con textCenter pb20px pt20px cursor">
			<div class="inline-block textCenter overflow">
				<p class="confirm-cancel mr40px">取    消</p>
				<p class="confirm-con">确    定</p>
			</div>
		</div>
	</div>
</div>

<div id="pop-ret-con-fail" style="display:none;">
	<div class="popUp">
		<div class="delete-con">
			<dl class="textCenter">
				<dt><img th:src="@{/static/img/tc_icon_sb.png}"></dt>
				<dd id="pop-ret-con-fail-title" class="pt20px pb20px f18px fb"></dd>
				<dd id="pop-ret-con-fail-msg" class="red"></dd>
			</dl>
		</div>
	</div>
</div> 

<div id="pop-ret-con-succ" style="display:none;">
	<div class="popUp">
		<div class="delete-con">
			<dl class="textCenter">
				<dt><img th:src="@{/static/img/tc_icon_cg.png}"></dt>
				<dd id="pop-ret-con-succ-msg" class="pt20px f18px fb"></dd>
			</dl>
		</div>
	</div>
</div>

<script th:src="${#request.getContextPath()}+'/static/js/jquery-2.1.3.min.js'"></script>
<script th:src="${#request.getContextPath()}+'/static/layer/layer.js'"></script>
<script>
    var basePath = $("input#basePathInput",parent.document).val();
    var validCode=true;
    var interval;
  	//更换号码弹层
    function editPhonePop(){
   	 	$("#phone").val("");
     	$("#verifyCode").val("");
        layer.open({
            type: 1  
            ,title: false //不显示标题栏
            ,closeBtn: false
            //是否要删除此数据
            //,area: ['', '']
            //新建组织
            ,area: ['600px','']
            ,shade: 0.8
            ,id: 'payCons' //设定一个id，防止重复弹出
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,shadeClose: true //设置允许点遮罩关闭
            ,content: $("div#pop-edit-phone-confirm"),
            success:function(){
    			//关闭弹层
    			$("#pop-edit-phone-confirm .close-btn").unbind().click(function(){
    				layer.closeAll();
    				
    			});
    			$("#pop-edit-phone-confirm .confirm-cancel").unbind().click(function(){
    				layer.closeAll();
    				
    			});
    			$("#pop-edit-phone-confirm .confirm-con").unbind().click(function(){
    				 var phone = $("#phone").val();
                     var verifyCode = $("#verifyCode").val();
                     if(isNull(phone)){
                     	layer.msg("手机号不能为空！");
                     	return;
                     }
                     if (!/^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(phone)){
                     	layer.msg("请正确填写您的手机号码！");
                     	return;
             		 }
                     if(isNull(verifyCode)){
                      	layer.msg("验证码不能为空！");
                      	return;
                      }
                     
                     $.ajax({
                         url:basePath+"/user/editUserPhone",
                         type:"post",
                         dataType:"json",
                         data:{"phone":phone,"verifyCode":verifyCode},
                         success:function (data) {
                             if(data.code == 200){
                            	 retSuccPop('修改成功');
                             }else{
                            	 retFailPop('修改失败',data.msg);
                             }
                         }
                     })  				
    				
    			});
            },
            
        });
    }
  	
  	//更换密码弹层
    function editPasswordPop(){
     	$("#newPsw").val(null);
        $("#repeatPsw").val(null);
        layer.open({
            type: 1  
            ,title: false //不显示标题栏
            ,closeBtn: false
            //是否要删除此数据
            //,area: ['', '']
            //新建组织
            ,area: ['600px','']
            ,shade: 0.8
            ,id: 'payCons' //设定一个id，防止重复弹出
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,shadeClose: true //设置允许点遮罩关闭
            ,content: $("div#pop-edit-password-confirm"),
            success:function(){
    			//关闭弹层
    			$("#pop-edit-password-confirm .close-btn").unbind().click(function(){
    				layer.closeAll();
    				
    			});
    			$("#pop-edit-password-confirm .confirm-cancel").unbind().click(function(){
    				layer.closeAll();
    				
    			});
    			$("#pop-edit-password-confirm .confirm-con").unbind().click(function(){
    				 var newPsw = $("#newPsw").val();
                     var repeatPsw = $("#repeatPsw").val();
                     if(isNull(newPsw)){
                     	layer.msg("新密码不能为空！");
                     	return;                    
                     }
                     console.log(newPsw.length);
                     if(newPsw.length<8){
                     	layer.msg("新密码长度不能小于8位！");
                      	return; 
                     }
					var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}');
					if(!pwdRegex.test(newPsw)){
						layer.msg("您的密码复杂度太低（密码中必须包含字母、数字、特殊字符）");
						return;
					}

					if(isNull(repeatPsw)){
                      	layer.msg("重复密码不能为空！");
                      	return;                    
                     }
                     if(repeatPsw.length<8){
                     	layer.msg("重复密码长度不能小于8位！");
                       	return; 
                     }
                     if(newPsw!=repeatPsw){
                      	layer.msg("两次输入密码不符！");
                        return; 
                     }
                     
                    $.ajax({
                         url:basePath+"/user/changePassword",
                         type:"post",
                         dataType:"json",
                         data:{"newPassword":newPsw},
                         success:function (data) {
                             if(data.code == 200){
                             	 var loginOutFlag=true;
								 retSuccPopRetLogin('修改成功');
                             }else{
                            	 retFailPop('修改失败',data.msg);
                             }
                         }
                     })
                     
    				
    				
    				
    			});
            },
            
        });
    }
    
    
    
    $("#editPhoneBtn").click(function(){
    	editPhonePop();
    })
    
    $("#editPasswordBtn").click(function(){
    	editPasswordPop();
    })

    function isNull(value) {
        return value == null || value === "" || value === undefined;
    }
    
    //发送短信
    function sendVerifyCode(obj){
    	var phone = $("#phone").val();
        if(isNull(phone)){
        	layer.msg("手机号不能为空！");
        	return;
        }
        if (!/^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(phone)){
        	layer.msg("请正确填写您的手机号码！");
        	return;
		 }
        var time=60;
		var code=$(obj);
		if (validCode) {
			validCode=false;
			code.addClass("msgs");
			interval=setInterval(function() {
				$(obj).removeAttr("onclick");
				time--;
				code.html(time+"秒");
				if (time==0) {
					clearInterval(interval);
					code.html("获取验证码");
					$(obj).attr("onclick","sendVerifyCode(this)");
					validCode=true;
					code.removeClass("msgs");
				}
			},1000)
		}
        $.ajax({
            url:basePath+"/msg/sendRandomCode",
            type:"post",
            dataType:"json",
            data:{"phone":phone},
            success:function (result) {
                if(result.code != 200){
                	clearInterval(interval);
                    layer.msg("短信发送失败！");
                }
            }
        })
    }
    
    /**
     * 提示失败
     */
    function retFailPop(title, msg){
    	$("#pop-ret-con-fail-title").html(title);
    	$("#pop-ret-con-fail-msg").html(msg);
    	layer.closeAll();
    	layer.open({
            type: 1  
            ,title: false //不显示标题栏
            ,closeBtn: false
            ,area: ['25%', '']
            ,shade: 0.8
            ,id: 'deleteFailPop' //设定一个id，防止重复弹出
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,shadeClose: true //设置允许点遮罩关闭
            ,content: $("#pop-ret-con-fail").html(),
            success:function(){
            	 initVerifyInterval();
            },
            
        });
      }
      
    /**
     * 提示成功
     */
    function retSuccPop(msg){
    	$("#pop-ret-con-succ-msg").html(msg);
    	layer.closeAll();
    	layer.open({
            type: 1  
            ,title: false //不显示标题栏
            ,closeBtn: false
            ,area: ['25%', '']
            ,shade: 0.8
            ,id: 'deleteSuccPop' //设定一个id，防止重复弹出
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,shadeClose: true //设置允许点遮罩关闭
            ,content: $("#pop-ret-con-succ").html(),
            success:function(){
            	if(msg=='修改成功'){
            		setTimeout(function(){ window.location.href=basePath+"/user/person" }, 1000);
            	}
            	initVerifyInterval();
            },
            
        });
      }

	/**
	 * 提示成功并返回登陆页
	 */
	function retSuccPopRetLogin(msg){
		$("#pop-ret-con-succ-msg").html(msg);
		layer.closeAll();
		layer.open({
			type: 1
			,title: false //不显示标题栏
			,closeBtn: false
			,area: ['25%', '']
			,shade: 0.8
			,id: 'deleteSuccPop' //设定一个id，防止重复弹出
			,btnAlign: 'c'
			,moveType: 1 //拖拽模式，0或者1
			,shadeClose: true //设置允许点遮罩关闭
			,content: $("#pop-ret-con-succ").html(),
			success:function(){
				if(msg=='修改成功'){
					setTimeout(function(){ top.location.href = basePath+"/outLogin";}, 3000);
				}
				initVerifyInterval();
			},

		});
	}
   
    //验证码倒计时初始化
    function initVerifyInterval(){
    	 clearInterval(interval);
    	 $("#sendVerifyCodeBtn").html("获取验证码");
		 $("#sendVerifyCodeBtn").attr("onclick","sendVerifyCode(this)");
		 validCode=true;
		 $("#sendVerifyCodeBtn").removeClass("msgs");
    }
    
    //增加头像点击选择文件
    $(".filejs").click(function () {
        $(".file").click();
    });
	//头像修改回显
    $(".file").on("change", function () {
        var file = $(".file").val();
        if (!file.match(/.jpg|.gif|.png|.jpeg|.bmp/i)) {　　//判断上传文件格式
            layer.open({
                content: '上传的图片格式不正确，请重新选择'
                , skin: 'msg'
                //,time: 2 //2秒后自动关闭
            });
            return;
        }
        var fileObj = this.files[0];
        var data = new FormData();
        data.append("file", fileObj);
        $.ajax({
            url: "../image/upload",
            type: "post",
            data: data, //JSON.stringify({"file": file}),
            dataType: "json",
            // contentType: "application/json",
            async: false,
            processData: false,   //用FormData传fd时需有这两项     必要
            contentType: false,
            success: function (data) {
                if (data.code == '0000') {
                    $("#showImg").attr("src",data.resultPath);
                    var userPhoto =  data.resultPath;
                   	$.ajax({
                         url:basePath+"/user/editUserPhoto",
                         type:"post",
                         dataType:"json",
                         data:{"userPhoto":userPhoto},
                         success:function (data) {
                             if(data.code == 200){
                            	 retSuccPop('修改成功');
                             }else{
                            	 retFailPop('修改失败',"头像保存失败");
                             }
                         }
                     })
                } else {
                	retFailPop('修改失败',"头像上传失败");
                }
            }
        });
    })

</script>
</body>
</html>
